<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('WeqKBDycZ2_VuqAmi538e')}}</p>
      <div class="operate-area">
        <div class="inline-item selection-item">
          <label class="title">{{$t('3XCbmVH_U3ZYTtc5eh9SZ')}}:</label>
          <div class="content">
            <Select v-model="agentName">
              <Option
                v-for="item in selections"
                :key="item.Agent_Name"
                :value="item.Agent_Name"
              >
                {{ item.Agent_Name }}
              </Option>
            </Select>
          </div>
        </div>
        <div class="inline-item search-item">
          <Input v-model="chargeStationName" @on-enter="searchTable">
            <span slot="prepend">{{$t('NNqwsiYKNFh8WR5Mvlwed')}}</span>
            <Button
              slot="append"
              icon="ios-search"
              @click="searchTable"
            ></Button>
          </Input>
        </div>
        <div class="inline-item btn-item" v-show="selections.length">
          <Button type="primary" icon="ios-search" @click="userQuery"
            >{{$t('fcPvSAT-dLcX9XXKCC0zX')}}</Button
          >
        </div>
        <div class="inline-item btn-item" v-show="selectStations.length">
          <Button type="primary" icon="ios-search" @click="periodPrice"
            >{{$t('2D1yqwiEDCvVHMVdfItrP')}}</Button
          >
        </div>
        <div class="inline-item btn-item" v-show="selectStations.length">
          <Button type="primary" icon="ios-search" @click="pileQuery"
            >{{$t('pile_query')}}</Button
          >
        </div>
      </div>
      <Table
        :loading="loading"
        :columns="columns"
        :data="data"
        @on-selection-change="selectionChangeHandler"
      ></Table>
      <Page
        class="page-component"
        size="small"
        :total="total"
        show-sizer
        show-elevator
        show-total
        :current.sync="current"
        :page-size="pageSize"
        :page-size-opts="pageSizeOpts"
        @on-change="changePage"
        @on-page-size-change="changePageSize"
      ></Page>
    </Card>
    <Modal
      v-model="formModal"
      :title="$t('p72c2aKEL9RP0HrCr6sJx')"
      footer-hide
      :mask-closable="false"
      draggable
      :fullscreen="fullscreen"
    >
      <form-info :data="formData" :rules="rules" @close="close" />
    </Modal>
    <Modal
      v-model="periodModal"
      :title="periodModalTitle"
      footer-hide
      :mask-closable="false"
      draggable
      width="1000"
    >
      <period-price v-if="periodModal" @close="periodModal = false" />
    </Modal>
  </div>
</template>

<script>
import { getAgentChargeStationData } from '@/api/data2'
import { createNamespacedHelpers } from 'vuex'
import FormInfo from './components/charge_station_form_info'
import PeriodPrice from './components/period_price'
const { mapState, mapMutations } = createNamespacedHelpers('agent')

export default {
  name: 'charge_station',
  components: {
    FormInfo,
    PeriodPrice
  },
  data () {
    return {
      formModal: false,
      chargeStationName: '',
      agentName: '',
      loading: false,
      fullscreen: false,
      formData: {
        chargeStationName: '',
        chargeStationAddress: '',
        buildTime: '',
        phone: '',
        contact: '',
        number: '',
        longitude: '',
        dimension: '',
        img: '',
        note: '',
        serviceCost: '',
        parkCost: ''
      },
      rules: {
        chargeStationName: [
          { required: true, message: this.$t('JxREaOcDxFufamZYsdylE'), trigger: 'blur' }
        ],
        number: [
          { required: true, message: this.$t('wdX8ZFhf8NbVepLO4rQp2'), trigger: 'blur' }
        ]
      },
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('NNqwsiYKNFh8WR5Mvlwed'),
          key: 'chargeStationName',
          width: 200
        },
        {
          title: this.$t('81K1V1IGGHxPb42EVYt1M'),
          key: 'chargeStationAddress',
          width: 200
        },
        {
          title: this.$t('--tuVB53obv9ckJ342vmq'),
          key: 'buildTime'
        },
        {
          title: this.$t('jE688EYtIT7-N6CXSWl5L'),
          key: 'phone',
          width: 120
        },
        {
          title: this.$t('Q58DQAm6oYtp3k-cvxlbn'),
          key: 'contact',
          width: 110
        },
        {
          title: this.$t('R50mHX0LambJk39x8cmq6'),
          key: 'note',
          width: 150
        },
        {
          title: this.$t('Ty1ns2epHIaihi82jwUfc'),
          width: 100,
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small',
                    icon: 'md-eye'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.showItem(params.index)
                    }
                  }
                },
                this.$t('ii2vupCukG5UaIywYapR0')
              )
            ])
          }
        }
      ],
      data: [],
      total: 10,
      current: 1,
      pageSize: 5,
      pageSizeOpts: [5, 10, 15, 20],
      periodModal: false,
      periodModalTitle: ''
      // periodChargeName: ''
    }
  },
  created () {
    this.agentName = this.selections.length ? this.selections[0].Agent_Name : ''
    this.queryTable()
  },
  computed: {
    ...mapState(['selections', 'selectStations'])
  },
  watch: {
    $route () {
      this.agentName = this.selections.length
        ? this.selections[0].Agent_Name
        : ''
    }
  },
  methods: {
    ...mapMutations(['setStations', 'setAllStations']),
    userQuery () {
      this.$router.push({
        name: 'user_query'
      })
    },
    pileQuery () {
      this.$router.push({
        name: 'pile_query'
      })
    },
    searchTable () {
      this.queryTable()
    },
    async queryTable ({
      current = this.current,
      pageSize = this.pageSize,
      search = this.chargeStationName
    } = {}) {
      this.loading = true
      const res = await getAgentChargeStationData({
        pageSize,
        current,
        search
      })
      this.data = res.tableData
      this.total = res.total
      this.loading = false
      this.setAllStations(res.tableData)
    },
    changePage (num) {
      this.current = num
      this.queryTable()
    },
    changePageSize (num) {
      this.pageSize = num
      this.queryTable()
    },
    showItem (index) {
      const item = this.data[index]
      this.formData = _.cloneDeep(item)
      this.formModal = true
    },
    close () {
      this.formModal = false
    },
    selectionChangeHandler (station) {
      console.log(station)
      this.setStations(station)
    },
    periodPrice () {
      this.periodModal = true
      this.periodModalTitle = this.selectStations.length
        ? this.selectStations[0].chargeStationName + '_' + this.$t('2D1yqwiEDCvVHMVdfItrP')
        : ''
      // this.periodChargeName = this.selectStations.length ? this.selectStations[0].chargeStationName : ''
    }
  }
}
</script>
